@charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0; box-sizing: border-box; -webkit-overflow-scroll:touch; -webkit-overflow-scrolling: touch;}

html {font-size: calc(100vw/7.5);}
body {overflow-x: hidden; width: 100%; height: 100vh; color: #333; background-image: url("../images/bg.jpg"); background-size: 100%;}
body.fixed {position: fixed; bottom: 0; left: 0; width: 100%;}
img {display: block; pointer-events: none; -webkit-user-select: none; -moz-user-select: none;}
button {display: block; margin: 0 auto; width: 2rem; height: .6rem; line-height: .6rem; text-align: center; color: #fff; font-size: .3rem; background-color: #ff6267; border-radius: .1rem; border: none; box-sizing: content-box; border-bottom: #ad2f2f .06rem solid;}

.flex {display: -webkit-flex; display: flex;}

.pop-bg {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.5); z-index: 999; display: none;}
.pop-bg.cross {-webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 100vh; height: 100vw; left: 7.5rem; top: 0;}
.pop-bg .pop-box {position: absolute; width: 6rem; background-color: rgba(23,122,87,.95); border: #5ed3a9 .02rem solid; box-shadow: 0 0 .1rem rgba(0,0,0,.3); left: .75rem; border-radius: .1rem; z-index: 99; display: none;}
.pop-bg .pop-box > p {font-size: .28rem; line-height: .36rem; text-align: center; padding: 0 .4rem; margin-bottom: .5rem;}
.pop-bg .pop-box.login {height: 3rem; top: 3.33rem; padding-top: .25rem;}
.pop-bg .pop-box.login > div > p {color: #fff; font-size: .3rem; line-height: .6rem; text-align: center;}
.pop-bg .pop-box.login > div > button {margin: .5rem auto 0;}
.pop-bg .pop-box.rule {height: auto; padding: .46rem .37rem; color: #fff; top: 2.14rem;}
.pop-bg .pop-box.rule h1 {text-align: center; font-size: .48rem; margin-bottom: .72rem;}
.pop-bg .pop-box.rule .pop-box-content p {font-size: .24rem; line-height: .3rem; padding-left: .4rem; position: relative; line-height: .3rem; margin-bottom: .28rem;}
.pop-bg .pop-box.rule .pop-box-content p span {position: absolute; left: 0;}
.pop-bg .pop-box.rule .pop-box-tips {color: #fff; font-size: .2rem; line-height: .3rem; margin-top: .6rem; text-align: right;}
.pop-bg .pop-box.station {padding: .5rem 0; top: 2.13rem; color: #fff;}
.pop-bg .pop-box.station p {text-align: center; font-size: .36rem; line-height: .6rem;}
.pop-bg .pop-box.station .pop-box-btns {justify-content: space-between; width: 3.6rem; margin: .75rem auto 0;}
.pop-bg .pop-box.station .pop-box-btns button {width: 1.2rem; height: .8rem; line-height: .8rem; background: none; border: #fff 1px solid; font-size: .36rem; border-radius: 0;}
.pop-bg .pop-box.station .select-choose-cont {margin-top: .85rem;}
.pop-bg .pop-box.station .select-choose-cont .select-choose-box {width: 4.4rem; height: .8rem; line-height: .8rem; margin: 0 auto .3rem; border: #fff 1px solid; position: relative;}
.pop-bg .pop-box.station .select-choose-cont .select-choose-box:before {content: ''; position: absolute; width: 0; border-top: #fff .12rem solid; border-left: transparent .1rem solid; border-right: transparent .1rem solid; right: .3rem; top: .32rem;}
.pop-bg .pop-box.station .select-choose-cont .select-choose-box input {position: absolute; left: 0; top: 0; width: 100%; height: .8rem; line-height: .8rem; padding: 0 .15rem; background: none; border: none; color: #fff; font-size: .3rem;}
.pop-bg .pop-box.station .select-choose-cont .select-choose-box input::-webkit-input-placeholder {color: rgba(255,255,255,.5); font-size: .3rem;}
.pop-bg .pop-box.station .select-choose-cont .select-choose-box select {position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; opacity: 0;}
.pop-bg .pop-box.station .select-choose-cont button {margin-top: .55rem;}
.pop-bg.cross .pop-box {width: 7rem; left: 50%; margin-left: -3.5rem; top: .84rem; padding: .75rem 0; text-align: center; color: #fff;}
.pop-bg.cross .pop-box .pop-box-title-last h1 {font-size: .36rem; margin-bottom: .4rem;}
.pop-bg.cross .pop-box .pop-box-title-last p {font-size: .3rem; margin-bottom: .1rem;}
.pop-bg.cross .pop-box .pop-box-title-last h2 {font-size: .3rem;}
.pop-bg.cross .pop-box .pop-box-content-last {margin-top: .75rem;}
.pop-bg.cross .pop-box .pop-box-content-last p {font-size: .28rem; line-height: .36rem;}
.pop-bg.cross .pop-box .share-btn {width: 3.4rem; margin-top: .35rem;}
.pop-bg #share {width: 3.29rem; position: absolute; left: 0; top: .1rem; display: none;}
.pop-bg .pop-close-box {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 98;}
.pop-bg.cross .pop-box#warning {top: 2rem;}


.page {background-image: url("../images/index_bg.jpg"); background-position: left bottom; background-repeat: no-repeat; background-size: 100%; min-height: 100vh;}
.page.cert {padding-top: .64rem;}
.page.form {background-image: url("../images/form_bg.jpg"); background-position: left bottom; background-repeat: no-repeat; background-size: 100%; padding: .4rem 0 .5rem;}
.page.question {background: none;}
.page .follow-box {padding-top: .4rem;}
.page .follow-box .follow-text-box {margin-top: .4rem;}
.page .follow-box .follow-text-box p {color: #fff; font-size: .36rem; text-align: center;}
.page .follow-box .follow-text-box .qr-box {background: #fff; padding: .2rem; width: 3.26rem; margin: .38rem auto;}
.page .rule-btn {position: absolute; width: 1.72rem; top: .4rem; right: .4rem;}
.page .slogan {position: absolute; left: 0; top: 1.23rem;}
.page .index-person {position: absolute; width: 80%; right: 0; bottom: 0;}
.page .index-btn {position: absolute; width: 3.46rem; left: 50%; margin-left: -1.73rem; bottom: .8rem;}
.page .age-sexuality-box {padding-top: 1.3rem;}
.page .age-sexuality-box .age-box {margin-top: .9rem; text-align: center;}
.page .age-sexuality-box .age-box p {font-size: .36rem; color: #fff; font-weight: bold;}
.page .age-sexuality-box .age-box .age-input-box {width: 3.6rem; height: .6rem; border: #fff .02rem solid; background-color: rgba(0,87,82,.1); margin: .25rem auto; position: relative; box-sizing: content-box;}
.page .age-sexuality-box .age-box .age-input-box input {position: absolute; left: 0; top: 0; width: 100%; height: .6rem; line-height: .6rem; padding: 0 .1rem; background: none; border: none; text-align: center; color: #fff;}
.page .age-sexuality-box .sexuality-box {margin-top: .85rem; text-align: center;}
.page .age-sexuality-box .sexuality-box p {font-size: .36rem; color: #fff; font-weight: bold;}
.page .age-sexuality-box .sexuality-box .sexuality-choose-box {padding-top: .35rem; width: 3.6rem; margin: 0 auto; justify-content: space-between;}
.page .age-sexuality-box .sexuality-box .sexuality-choose-box .sexuality-item-box {width: 1.6rem; height: 2.1rem;}
.page .age-sexuality-box .sexuality-box .sexuality-choose-box .sexuality-item-box.male {background-image: url("../images/male_icon.png"); background-size: 100%; background-repeat: no-repeat;}
.page .age-sexuality-box .sexuality-box .sexuality-choose-box .sexuality-item-box.female {background-image: url("../images/female_icon.png"); background-size: 100%; background-repeat: no-repeat;}
.page .age-sexuality-box .sexuality-box .sexuality-choose-box .sexuality-item-box.male.onthis {background-image: url("../images/male_icon_onthis.png"); background-size: 100%; background-repeat: no-repeat;}
.page .age-sexuality-box .sexuality-box .sexuality-choose-box .sexuality-item-box.female.onthis {background-image: url("../images/female_icon_onthis.png"); background-size: 100%; background-repeat: no-repeat;}
.page .age-sexuality-box button {margin-top: .85rem;}

.page .certificate-box {width: 6.9rem; margin: 0 auto; background: url(../images/certificate_bg.jpg) no-repeat; background-size: 100% 100%; padding: .6rem 0; }
.page .certificate-box > h1 { font-size: .48rem; color: #009944; text-align: center; margin-top: .2rem; }
.page .certificate-box .month { display: flex; justify-content: center; align-items: center; font-size: .36rem; color: #888; font-weight: bold; margin: .36rem 0; }
.page .certificate-box .month:before { content: ''; width: 10%; height: .04rem; background: #dad8d4; margin-right: .2rem; }
.page .certificate-box .month:after { content: ''; width: 10%; height: .04rem; background: #dad8d4; margin-left: .2rem; }
.page .certificate-box .certificate-rule-box { color: #7b7a7a; font-size: .18rem; padding: 0 .46rem; }
.page .certificate-box .certificate-rule-box h1 {font-size: .24rem; color: #676767; margin-bottom: .34rem;}
.page button.red {width: 6.9rem; height: 1rem; line-height: .1rem; background: #da2128; border: none; border-radius: 0; margin-top: .38rem;}

.page .form-text {margin: .33rem .46rem .18rem; color: #fff; font-size: .18rem;}
.page .form-box {background-color: rgba(0,0,0,.3); width: 6.9rem; margin: 0 auto; padding: .36rem .46rem;}
.page .form-box .form-box-item {margin-bottom: .35rem;}
.page .form-box .form-box-item:last-child {margin-bottom: 0;}
.page .form-box .form-box-item h1 {font-size: .3rem; color: #fff; margin-bottom: .18rem;}
.page .form-box .form-box-item .form-input-box {width: 100%; height: .88rem; background-color: #fff; position: relative;}
.page .form-box .form-box-item .form-input-box.select {background-image: url("../images/arr_down.png"); background-size: .36rem; background-repeat: no-repeat; background-position: 5.4rem center;}
.page .form-box .form-box-item .form-input-box input {position: absolute; width: 100%; line-height: .88rem; background: none; border: none; left: 0; top: 0; padding: 0 .26rem; font-size: .24rem;}
.page .form-box .form-box-item .form-input-box select {position: absolute; width: 100%; left: 0; right: 0; bottom: 0; top: 0; opacity: 0;}

.page .tips {position: absolute; width: 4rem; top: 4rem; left: 1.75rem; z-index: 99; border-radius: .1rem; box-shadow: 0 0 .1rem rgba(0,0,0,.3);}
.page .sun-light {position: fixed; width: 13.34rem; left: 7.5rem; top: 0; mix-blend-mode: screen; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(90deg); transform: rotate(90deg); z-index: 9; -webkit-animation-duration: 10s; animation-duration: 10s; display: none;}
.page .car {position: fixed; width: 3.7rem; height: 1.37rem; top: 1.35rem; left: 2rem; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(90deg); transform: rotate(90deg); z-index: 2; background-image: url("../images/car_img.png"); background-size: 100%; background-repeat: no-repeat;}
.page .car .wheel {position: absolute; width: .52rem; bottom: .16rem; left: .73rem; -webkit-animation: rotate .5s linear infinite; animation: rotate .5s linear infinite;}
.page .car .wheel.paused {-webkit-animation-play-state: paused; animation-play-state: paused;}
.page .car .wheel:last-child {left: 2.4rem;}
.page .city-box {-webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 40.02rem; height: 7.5rem; position: absolute; left: 7.5rem; top: 0;}
.page .city-box.station {width: 100vh; z-index: 99; overflow: hidden; display: none;}
.page .city-box.station > .station-bg {width: 25.39rem;}
.page .city-box.store {width: 100vh; background-image: url("../images/store_bg.jpg"); background-size: 16.24rem; background-repeat: no-repeat; background-position: center center; display: none;}
.page .city-box .city-station {width: 7.38rem; position: absolute; right: 2.37rem; top: 3.37rem;}
.page .city-box .game-tips {width: 4rem; position: absolute; top: 1.95rem; left: 4rem; border-radius: .1rem; box-shadow: 0 0 .1rem rgba(0,0,0,.3); z-index: 99; display: none;}
.page .city-box.station .game-tips {right: 5.2rem; left: auto;}
.page .city-box .game-tips .tips-finger {position: absolute; width: .69rem; top: 1.6rem; left: 3rem; -webkit-animation: fingerMove 2s infinite; animation: fingerMove 2s infinite;}
.page .city-box .game-tips#stationTips .tips-finger {top: 1.8rem;}
.page .city-box .game-click {position: absolute; width: 1.55rem; top: 3rem; right: 5.66rem;}
.page .city-box .question-cont {position: absolute; width: 5.2rem; height: 6.3rem; background-color: #fff; border-radius: .2rem; overflow: auto; right: .78rem; top: .52rem; padding-bottom: .2rem; z-index: 999; display: none; padding-right: .03rem;}
.page .city-box .question-cont::-webkit-scrollbar {width: .08rem; background: none;}
.page .city-box .question-cont::-webkit-scrollbar-thumb {width: .08rem; background-color: rgba(0,0,0,.3); border-radius: .08rem;}
.page .city-box .question-cont .question-box .question-box-title {height: 1.2rem; background-color: #00a54f; border-bottom: #ee1d23 .04rem solid; padding: 0 .2rem; align-items: center; background-image: url("../images/form_title_icon.png"); background-repeat: no-repeat; background-size: 1.16rem; background-position: right bottom;}
.page .city-box .question-cont .question-box .question-box-title .que-icon {width: .55rem; margin-right: .15rem;}
.page .city-box .question-cont .question-box .question-box-title h1 {color: #fff; font-size: .26rem; font-weight: bold; font-style: italic;}
.page .city-box .question-cont .question-box .question-box-content {padding: .22rem .2rem .5rem;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item {display: -webkit-flex; display: flex; padding: .22rem 0; align-items: center;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item p {font-size: .26rem; color: #555555;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item input[type="radio"] {display: none;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item input[type="radio"]+label {display: block; width: .36rem; height: .36rem; border: #b2b2b2 .02rem solid; border-radius: 50%; margin-right: .15rem; position: relative;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item input[type="radio"]:checked+label:before {content: ''; position: absolute; width: .16rem; height: .16rem; background-color: #00a54f; border-radius: 50%; top: 50%; left: 50%; margin-left: -.08rem; margin-top: -.08rem;}
.page .city-box .question-cont .question-box .question-box-content .question-textarea-box textarea {margin-left: .49rem; width: 4.3rem; height: 1.5rem; padding: .1rem; background-color: #f3f3f3; border: #ccc 1px solid; display: none;}
.page .city-box .station-car {position: absolute; left: 0; bottom: 0; width: 9.97rem;}
.page .city-box .station-person {position: absolute; width: 1.93rem; bottom: 0; left: 7.16rem;}
.page .city-box .door-left {position: absolute; width: 1.99rem; bottom: .07rem; right: 7.23rem;}
.page .city-box .door-right {position: absolute; width: 2.02rem; bottom: .07rem; right: 5.21rem;}
.page .city-box .question-cont#que2 {right: auto; left: .48rem;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item.check {margin-left: .5rem;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item input[type="checkbox"] {display: none;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item input[type="checkbox"]+label {display: block; width: .25rem; height: .25rem; border: #b2b2b2 .02rem solid; margin-right: .15rem;}
.page .city-box .question-cont .question-box .question-box-content .question-box-item input[type="checkbox"]:checked+label {background-image: url("../images/checked_icon.png"); background-size: .2rem; background-repeat: no-repeat; background-position: center center;}
.page .city-box .door-left.open {-webkit-animation: leftOpen 1s linear forwards; animation: leftOpen 1s linear forwards;}
.page .city-box .door-right.open {-webkit-animation: rightOpen 1s linear forwards; animation: rightOpen 1s linear forwards;}
.page .city-box.station.close {-webkit-animation: stationClose .5s linear forwards; animation: stationClose .5s linear forwards;}
.page .city-box .clerk-hand {position: absolute; width: .74rem; top: 3.52rem; left: 50%; margin-left: -.95rem; -webkit-transform-origin: 10% 90%; transform-origin: 10% 90%;}
.page .city-box .customer-hand {position: absolute; width: .77rem; top: 3.4rem; left: 50%; margin-left: -.15rem; -webkit-transform-origin: 90% 90%; transform-origin: 90% 90%;}
.page .city-box .store-customer {position: absolute; width: 1.18rem; top: 2.63rem; left: 50%; margin-left: -.05rem;}
.page .city-box .question-cont .question-box .question-box-content .input-select-box {margin-bottom: .6rem;}
.page .city-box .question-cont .question-box .question-box-content .input-select-box h1 {color: #555; font-size: .26rem; margin-bottom: .15rem;}
.page .city-box .question-cont .question-box .question-box-content .input-select-box .select-box {width: 4.8rem; height: .58rem; line-height: .58rem; border: #ccc 1px solid; position: relative;}
.page .city-box .question-cont .question-box .question-box-content .input-select-box .select-box:before {content: ''; position: absolute; width: 0; border-top: #00a54f .14rem solid; border-left: transparent .12rem solid; border-right: transparent .12rem solid; right: .16rem; top: .22rem;}
.page .city-box .question-cont .question-box .question-box-content .input-select-box .select-box input {position: absolute; width: 100%; line-height: .58rem; background: none; border: none; padding: 0 .2rem;}
.page .city-box .question-cont .question-box .question-box-content .input-select-box .select-box select {position: absolute; width: 100%; height: .58rem; top: 0; left: 0; opacity: 0;}
.page .city-box.station .game-click {top: 4rem; left: 7.66rem; right: auto;}
.page .city-box .question-cont .question-box .question-box-content .question-textarea-box.last {margin-bottom: .4rem;}
.page .city-box .question-cont .question-box .question-box-content .question-textarea-box.last p {font-size: .26rem; color: #555; margin-bottom: .3rem;}
.page .city-box .question-cont .question-box .question-box-content .question-textarea-box.last textarea {margin-left: 0;}
.page .city-box .question-cont .question-box .question-box-content .upload-cont p {font-size: .26rem; color: #555; margin-bottom: .34rem;}
.page .city-box .question-cont .question-box .question-box-content .upload-cont .upload-box .upload-item {width: 1.4rem; height: 1.4rem; background-image: url("../images/upload_bg.jpg"); background-size: 100%; background-repeat: no-repeat; margin-right: .2rem; position: relative; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.page .city-box .question-cont .question-box .question-box-content .upload-cont .upload-box .upload-item img {max-width: 100%; max-height: 100%;}
.page .city-box .question-cont .question-box .question-box-content .upload-cont .upload-box .upload-item input {position: absolute; width: 100%; top: 0; left: 0; height: 1.4rem; opacity: 0;}










@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fingerMove {
    from {
        left: 3rem;
        opacity: 1;
    }
    to {
        left: .5rem;
        opacity: 0;
    }
}

@keyframes fingerMove {
    from {
        left: 3rem;
        opacity: 1;
    }
    to {
        left: .5rem;
        opacity: 0;
    }
}

@-webkit-keyframes leftOpen {
    from {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes leftOpen {
    from {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-webkit-keyframes rightOpen {
    from {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@keyframes rightOpen {
    from {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    to {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-webkit-keyframes stationClose {
    from {
        -webkit-transform: rotate(90deg) scale(1) translateX(0%) translateY(0%);
        transform: rotate(90deg) scale(1) translateX(0%) translateY(0%);
    }
    to {
        -webkit-transform: rotate(90deg) scale(2.5) translateX(-42%) translateY(-52%);
        transform: rotate(90deg) scale(2.5) translateX(-42%) translateY(-52%);
    }
}

@keyframes stationClose {
    from {
        -webkit-transform: rotate(90deg) scale(1) translateX(0%) translateY(0%);
        transform: rotate(90deg) scale(1) translateX(0%) translateY(0%);
    }
    to {
        -webkit-transform: rotate(90deg) scale(2.5) translateX(-42%) translateY(-52%);
        transform: rotate(90deg) scale(2.5) translateX(-42%) translateY(-52%);
    }
}





